<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
    height="100%"
  >
    <el-table-column label="设备编号" width="180" align="center">
      <template slot-scope="scope">
        <i class="el-icon-set-up"></i>
        <span style="margin-left: 10px">{{ scope.row.deviceKey }}</span>
      </template>
    </el-table-column>
    <el-table-column label="继电器编号" width="180" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.relayID }}</span>
      </template>
    </el-table-column>
    <el-table-column label="继电器名称" width="180" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.realyName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="继电器状态" width="180" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{
          scope.row.status == 1 ? "在线" : "离线"
        }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180" align="center">
      <template slot-scope="scope">
        <el-button size="mini" @click="openDevice(scope.row.index)">闭合</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="discDevice(scope.row.index)"
          >断开</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    discDevice(index) {
      this.$axios
        .post("/app/SetRelays", {
          headers: {
            userId: "176",
          },
          data: {
            "deviceKey": this.tableData[index].deviceKey,
            "relayId": this.tableData[index].relayID,
            "opt": 0,
          },
        })
        .then((res) => {
          console.log(res);
        });
      // location.reload();
      // console.log({deviceKey: this.tableData[index].deviceKey,
      //   relayId: this.tableData[index].relayID,
      //   opt: 1})
    },
    openDevice(index) {
      this.$axios
        .post("/RestfulApi/SetRelays", {
          data: {
            // deviceKey: this.tableData[index].deviceKey,
            // relayId: this.tableData[index].relayID,
            id: 11,
            opt: 1,
          },
        })
        .then((res) => {
          console.log(res);
        });
      // location.reload();
    },
  },
  mounted() {
    this.$axios
      .get("/app/GetRelays", {
        headers: {
          userId: "176",
        },
        params: {
          deviceKey: "",
        },
      })
      .then((res) => {
        this.tableData = res.data.data;
        console.log("继电器数据", this.tableData);
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<style lang="less" scoped>
</style>